<template>
    项目名称:<input type="text" v-model="Iname" >
    <button @click="LoadData">查询</button>
    <button>正序</button>
    <button>倒序</button>
    <table style="text-align: center; width: 100%;">
         <thead style="background-color: aqua;"> 
            <tr>
                <th>投资ID</th>
                <th>投资项目名称</th>
                <th>总额度</th>
                <th>已投金额</th>
                <th>剩余额度</th>
                <th>投资次数</th>
                <th>操作</th>
            </tr>
         </thead>
         <tbody>
            <tr v-for="item in InvestInfo" :key="item.I_Id">
                <td>{{item.I_Id}}</td>
                <td>{{item.I_Name}}</td>
                <td>{{item.I_SumMoney}}</td>
                <td>{{item.I_Rediue}}</td>
                <td>{{item.I_Redeve}}</td>
                <td>{{item.I_Number}}</td>
                <td>
                    <slot :id="item.I_Id"></slot>
                </td>
            </tr>
         </tbody>
    </table>
    <span>
        共{{TotalCount}}条数据,每页显示{{PageSize}}条,当前第{{PageIndex}}/{{TotalPage}}页
    </span>
    <span>
        <a href="#" @click="LoadPage('F')">首页</a>&nbsp;
        <a href="#" @click="LoadPage('P')">上一页</a>&nbsp;
        <a href="#" v-for="item in TotalPage" @click="Jump(item)">&nbsp;{{item}}&nbsp;</a>&nbsp;
        <a href="#" @click="LoadPage('N')">下一页</a>&nbsp;
        <a href="#" @click="LoadPage('L')">尾页</a>&nbsp;
    </span> 
    <span>
        跳转至<input type="text" v-model="Cindex" style="width: 30px;">页
        <input type="button" value="跳转" @click="JumpPage()">
    </span>
    <span>
        <select v-model="Csize" @change="ShowPageSize">
            <option value="5">5条/页</option>
            <option value="10">10条/页</option>
            <option value="15">15条/页</option>
        </select>
    </span>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue'
import axios from 'axios'

const InvestInfo = ref([
    {
        I_Id:0,
        I_Name:'',
        I_SumMoney:'',
        I_Rediue:'',
        I_Redeve:'',
        I_Number:0,
    }
])
//创建响应式数据
const PageSize = ref(5);
const PageIndex = ref(1);
const TotalPage = ref(0);
const TotalCount = ref(0);

const Iname = ref('');
//生命周期函数勾
onMounted(()=>{
    LoadData();
})

//显示数据
const LoadData = ()=>{
     axios("https://localhost:44354/api/Invests/ShowInvestOrderByInfoAll",{
        params:{
            Iname:Iname.value,
            PageSize:PageSize.value,
            PageIndex:PageIndex.value,
        }
     }).then(res=>{
        InvestInfo.value = res.data.list,
        TotalCount.value = res.data.TotalCount,
        TotalPage.value = res.data.TotalPage
       
     }).catch(err=>{
        console.log(err);
     })
}

//基本分页
const LoadPage = (type:string)=>{
    switch(type){
        case 'F':
            PageIndex.value = 1;
            break;
        case 'P':
            if(PageIndex.value == 1)
            {
                alert("已经是第一页了");
                return
            }
            PageIndex.value--;
            break;
        case 'N':
            if(PageIndex.value == TotalPage.value)
            {
                alert("已经是最后一页了");
                return
            }
            PageIndex.value++;
            break;
        case 'L':
            PageIndex.value = TotalPage.value;
            break;
    }
    LoadData();
}

const Cindex = ref("")

//跳转页面
const JumpPage = ()=>{
    if(Cindex.value == "")
    {
        alert("请输入跳转页码");
        return
    }

    const index = Number(Cindex.value)
    if(isNaN(index))
    {
        alert("请输入数字页码");
        return
    }
    if(index<1)
    {
        alert("请输入大于0的整数页码");
        return
    }
    if(index>TotalPage.value)
    {
        alert("输入的页码大于总页数");
        return
    }
    PageIndex.value = index;
    LoadData();
}

const Csize = ref(5)

//显示条数
const ShowPageSize  = ()=>{
   PageSize.value = Csize.value;
   LoadData();
}

//跳转至指定页
const Jump = (index:number)=>{
    PageIndex.value = index;
    LoadData();
}
</script>